import { useState, useEffect } from "react";
import "./index.less";
import { Image } from "antd";
import MeauBox from "../components/MeauBox";
import { getFileUrl } from '../../../../util/index';

function ImgItem({data}: any) {
  const {item, index} = data;
  const {source} = item;

  const cssBySource = source === 'message' ? 'isMessage' : 'isReply';

  const [isShowMessageMeau, setIsShowMessageMeau] = useState(false);

  const handleRightClick = (event: any) => {
    event.preventDefault();
    const flag = !isShowMessageMeau;
    setIsShowMessageMeau(flag);
  };

  return (
    <div className={`img-item ${ cssBySource }`} onContextMenu={ handleRightClick }>
      <img className="message-avatar" src={ item.avatar } alt="" />
      <div className="img-item-content">
        <MeauBox isShowBox={ isShowMessageMeau } data={ data } />
        <Image
          src={getFileUrl(item.message)}
        />
      </div>
    </div>
  );
}

export default ImgItem;
